<template>
  <div class="user-view">
    <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
      <RealTimeCom></RealTimeCom>
      <CheckNoticeCom></CheckNoticeCom>
      <ReportRoadCom></ReportRoadCom>
      <ToolBoxCom></ToolBoxCom>
      <div class="flex-grow" /><!-- 让下面的组件右对齐 -->
      <SearchThingCom></SearchThingCom>
      <InformationCom></InformationCom>
    </el-menu>
    <OpenMap />
    <NoticeCom class="checkNotice" v-show="showNotice" />
    <RoadConditionCom v-show="showReport" />
    <PopupCom></PopupCom>
    <!-- <MapControls></MapControls> -->
    <ControlCom></ControlCom>
  </div>
</template>

<script setup>
import OpenMap from '@/components/user/OpenMap.vue'
import RealTimeCom from '@/components/user/RealTimeCom.vue'
import CheckNoticeCom from '@/components/user/notice/CheckNoticeCom.vue'
import ReportRoadCom from '@/components/user/road/ReportRoadCom.vue'
import ToolBoxCom from '@/components/user/ToolBoxCom.vue'
import SearchThingCom from '@/components/user/SearchThingCom.vue'
import PopupCom from '@/components/user/PopupCom.vue'
import MapControls from '@/components/user/MapControls.vue'

import NoticeCom from '@/components/user/notice/NoticeCom.vue'
import RoadConditionCom from '@/components/user/road/RoadConditionCom.vue'
import { storeToRefs } from 'pinia'
import { useMapgisStore } from '@/stores/mapgis.js'
const { showNotice, showReport } = storeToRefs(useMapgisStore())
const { CheckNoticeClick, CheckReportClick } = useMapgisStore()
import ControlCom from '@/components/user/ControlCom.vue'

// const { realTimeTraffic, measureDistance, closeMeasure } = useMapgisStore()

import InformationCom from '@/components/user/InformationCom.vue'
</script>

<style scoped>

.flex-grow {
  flex-grow: 1;
}
</style>
